<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />
    <r-table
      :tableHandles="tableHandles"
      :isSelection="false"
      :isIndex="false"
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :isHandle="true"
      @refresh="init()"
    >
    </r-table>
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="700px"
      :isHandle="true"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        btType: ""
      },
      searchForm: [
        {
          type: "select",
          prop: "btType",
          placeholder: "BatteryType",
          options: [],
          width: 150
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        }
      ],

      tableHandles: [
        {
          label: "Add",
          type: "primary",
          handle: e => this.elFormVisible()
        }
        // {
        //   label: "ExportData",
        //   type: "primary",
        //   handle: e => {}
        // }
      ],
      tableData: [],
      tableCols: [
        {
          label: "序号",
          prop: "id"
        },
        // {
        //   label: 'DepositType',
        //   prop: 'type',
        // },
        {
          label: "BatteryType",
          prop: "btTypeName"
        },
        {
          label: "BatteryDescribe",
          prop: "remarks"
        },
        {
          label: "DepositMoney",
          prop: "money"
        },
        {
          label: "Update Time",
          prop: "ctime"
        },
        {
          label: "Operations",
          type: "button",
          width: 300,
          btnList: [
            {
              label: "Edit",
              type: "text",
              handle: row => this.elFormDetail(row)
            },
            {
              label: "Delete",
              type: "text",
              handle: row => this.del(row)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        // type: "",
        btType: "",
        money: "",
        remarks: ""
      },
      formCols: [
        // { type: "select", label: "DepositType", width: 350, prop: "type",options:[
        //     {label:'换电Deposit',value:'1'},
        //     {label:'租车Deposit',value:'2'},
        //   ] },
        {
          type: "select",
          label: "BatteryType",
          width: 350,
          prop: "btType",
          options: [],
          isDisabled: () => {
            if (this.formData.id) {
              return true;
            } else {
              return false;
            }
          }
        },
        {
          type: "input",
          label: "DepositMoney",
          width: 350,
          prop: "money",
          remark: "元"
        },
        { type: "input", label: "Describe", width: 350, prop: "remarks" }
      ],
      formRules: {
        type: [{ required: true, message: "Please Select", trigger: "blur" }],
        btType: [{ required: true, message: "Please Select", trigger: "blur" }],
        money: [{ required: true, message: "Please Enter", trigger: "blur" }],
        remarks: [{ required: true, message: "Please Enter", trigger: "blur" }]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ]
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
    this.batteryTypeList();
  },
  methods: {
    async init() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      let res = await this.apis.deposit_list(parm);
      if (res) {
        this.tableData = res.rows || [];
        this.tablePage.total = res.total;
      }
    },
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          if (this.formData.id) {
            let res = await this.apis.deposit_updata(this.formData);
            if (res) {
              this.init();
              this.elFormVisible();
            }
          } else {
            let res = await this.apis.deposit_save(this.formData);
            if (res) {
              this.init();
              this.elFormVisible();
            }
          }
        }
      });
    },
    async changestate(id) {
      let res = await this.api.packchange({ id });
      if (res) {
        this.init();
      }
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key] + "";
      });
      this.formData.id = row.id;
      this.elFormVisible();
    },
    async batteryTypeList() {
      // const res=await this.apis.batteryTypeList({
      //   pageNum:1,
      //   pageSize:10000,
      //   commonType:1
      // });
      // let list=res.rows;
      const res2 = await this.apis.batteryTypeList({
        pageNum: 1,
        pageSize: 10000,
        commonType: 2
      });
      const list2 = res2.rows;

      // list=list.concat(list2);

      let options = [];
      list2.map(res => {
        options.push({
          label: res.typeName,
          value: res.id
        });
      });

      this.searchForm[
        this.labIndex2(this.searchForm, "btType")
      ].options = options;
      this.formCols[this.labIndex2(this.formCols, "btType")].options = options;
    },
    del(row) {
      this.$confirm("确定要Delete吗?", "Hint", {
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel",
        type: "warning"
      })
        .then(async () => {
          var res = await this.apis.deposit_del({
            id: row.id
          });
          this.$message({
            type: "success",
            message: "DeleteSuccess!"
          });
          this.init();
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped lang="scss">
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
